<script>
    import FundFlows from './components/FundFlows.vue'
    import SectorCapitalFlows from './components/SectorCapitalFlows.vue'
    import TechBorder from './components/TechBorder.vue'
    import RealTimeClock from './components/RealTimeClock.vue'
    import ChinaIndex from './components/ChinaIndex.vue'
    import Sectors from './components/Sectors.vue'
    import SecuritiesAlerts from './components/SecuritiesAlerts.vue'
    export default {
        name: 'app',
        components: {
            FundFlows,
            SectorCapitalFlows,
            TechBorder,
            RealTimeClock,
            ChinaIndex,
            Sectors,
            SecuritiesAlerts
        }
    }
</script>

<template>
  <div class="background"></div>
  <div class="mainBody">
    <div><real-time-clock></real-time-clock></div>
    <div class="title">
        <p>资金交收风险提示</p>
    </div>
    <div class="context">
      <div class="left">
        <div class="left-top">
          <div class="left-top-left container">
            <tech-border title="中国指数">
                <template v-slot:context>
                    <china-index></china-index>
                </template>
</tech-border>

</div>
<div class="left-top-right container">
    <tech-border title="4.2新股上市日历">
        <template v-slot:context>
            <Sectors></Sectors>
          </template>
    </tech-border>

</div>
</div>
<div class="left-buttom">
    <div class="left-buttom-left container">
        <tech-border class="fundFlowsContainer" title="港股通资金流">
            <template v-slot:context>
                <fund-flows></fund-flows>
              </template>
        </tech-border>
    </div>
    <div class="left-buttom-right container">
        <tech-border class="sectorCapitalFlowsContainer" title="4.5板块资金流今日跌涨幅">
            <template v-slot:context>
                <sector-capital-flows></sector-capital-flows>
              </template>
        </tech-border>
    </div>
</div>
</div>
<div class="right container">
    <tech-border title="4.3证券快讯">
        <template  v-slot:context>
            <securities-alerts></securities-alerts>
        </template>
    </tech-border>
</div>
</div>
</div>
</template>

<style>
    body {
            zoom: 0.97;
        }

    canvas {
        zoom: 1.25;
        transform: scale(0.8);
        transform-origin: 0px 0px;
    }

    #app {
        width: 100%;
        height: 100%;
        padding: 0px;
    }

    .background {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url('src/assets/背景板.png');
        background-size: 100% 100%;
        z-index: -999;
    }

    .mainBody {
        width: 100vw;
        height: 100vh;
    }

    .container {
        padding: 5px;
    }

    .title {
        height: 10%;
        text-align: center;
        color: transparent;
        background-color: rgb(0, 0, 117);
        text-shadow: rgba(255, 255, 255, 0.5) 0 5px 6px, rgba(255, 255, 255, 0.2) 1px 3px 3px;
        -webkit-background-clip: text;
        /* background-color: aqua; */
    }

    .context {
        height: 90%;
        /* background-color: aquamarine; */
    }

    .left {
        width: 75%;
        float: left;
        height: 100%;
        /* background-color: blue; */
    }

    .right {
        float: right;
        width: 25%;
        height: 100%;
        /* background-color: red; */
    }

    .left-top {
        height: 50%;
        /* background-color: cadetblue; */
    }

    .left-buttom {
        height: 50%;
        /* background-color: aquamarine; */
    }

    .left-top-left {
        float: left;
        width: 50%;
        height: 100%;
        /* background-color: blueviolet; */
    }

    .left-top-right {
        float: left;
        width: 50%;
        height: 100%;
        /* background-color: coral; */
    }

    .left-buttom-left {
        width: 66.6666%;
        height: 100%;
        float: left;
    }

    .left-buttom-right {
        width: 33.3333%;
        height: 100%;
        float: left;
    }
</style>
